<!DOCTYPE html><html lang="en"><head>
    <script src="./d3/d3-4.7.3/d3.js"></script> </head>
<body>
    <script type="text/javascript" charset="utf-8">
        function SimpleWidget(spec) {
            var instance = {}; // <-- A
            var headline, description; // <-- B
            instance.render = function() {
                var div = d3.select('body').append("div");
                div.append("h3").text(headline); // <-- C
                div.attr("class", "box")
                    .attr("style", "color:" + spec.color) // <-- D
                    .append("p")
                    .text(description); // <-- E
                return instance; // <-- F
            };
            instance.headline = function(h) {
                if (!arguments.length) h; // <-- G
                headline = h;
                return instance; // <-- H
            };
            instance.description = function(d) {
                if (!arguments.length) d;
                description = d;
                return instance;
            };
            return instance; // <-- I
        }
        var widget = SimpleWidget({
                color: "#6495ed"
            })
            .headline("Simple Widget")
            .description("This is a simple widget demonstrating functional javascript.");
        widget.render();
    </script>
</body>

</html>
